<script setup>
import { reactive, ref, onMounted } from 'vue'
import bread from '@/components/bread/bread.vue'
import { Right } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import pagination from '@/components/pagination/pagination.vue'
import { getArticleList4ArticleType, getArticleVosPage } from "../../service/applyaudit/applyaudit";
const router = useRouter();
const route = useRoute();
const breadcround = ref([
  { name: '首页', url: '/main/home' },
  { name: '新闻咨询', url: '/main/NewsList?articleType=INFORMATION' }
])
const newsList = ref([])

let current = ref(1)
let size = ref(10)
let total = ref(1)

const newItemClick = (articleId) => {
  router.push({ path: '/main/newItem', query: { articleId: articleId } })
}
const handleSizeChange = (val) => {
  // currentPage1 = val
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  current.value = val
  getArticleList();

}
function getArticleList() {
  getArticleVosPage({ articleType: route.query.articleType, current: current.value, size: size.value }).then((resp) => {
    console.log(resp);
    if (resp.data.code === 0) {
      newsList.value = resp.data.result.records;
      total.value = resp.data.result.total
    } else {

    }
  });
}
onMounted(() => {
  getArticleList();
})
</script>

<template>
  <div>
    <div class="banner">
      <img src="@/assets/img/newbg.png" alt="">
    </div>
    <div class="news">
      <bread class="bread" :breadcround="breadcround" />
      <div>
        <div class="list">
          <template v-for="(item, index) in newsList" :key="item.articleId">
            <div class="listItem" @click="newItemClick(item.articleId)">
              <div class="img">
                <img :src="item.coverImage" alt="">
              </div>
              <div class="msg">
                <div class="title">{{ item.articleTitle }}</div>
                <div class="context">
                  {{ item.outline }}
                </div>
                <div class="time">
                  <div class="month">
                    {{ item.titleTime.split('-')[1] }}
                  </div>
                  <div class="year">
                    {{ item.titleTime.split('-')[0] }}
                  </div>
                </div>
                <div class="nextBtn">
                  <el-icon class="iconColor">
                    <Right />
                  </el-icon>
                </div>
              </div>
            </div>
          </template>
        </div>

        <pagination :currentPage1="current" :pageSize="size" :total="total" @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.banner {
  height: 280px;
  background: #006FD6;
}

.news {
  // padding: 0 7.8%;
  width: 1500px;
  margin: 0 auto;

  .bread {
    margin: 24px 0;
  }

  .list {
    min-height: 800px;

    .listItem {
      height: 240px;
      display: flex;
      justify-items: flex-start;
      margin-bottom: 50px;

      .img {
        width: 380px;
        height: 100%;

        // background-color: red;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .msg {
        position: relative;
        margin-left: 30px;
        width: 1060px;

        .title {
          margin-top: 30px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          line-height: 24px;
          width: 900px;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //超出使用省略号
          display: -webkit-box;
          -webkit-line-clamp: 1; //第几行
          -webkit-box-orient: vertical;
        }

        .context {
          margin-top: 22px;
          width: 900px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #787878;
          line-height: 36px;
          overflow: hidden; //超出隐藏
          text-overflow: ellipsis; //超出使用省略号
          display: -webkit-box;
          -webkit-line-clamp: 2; //第几行
          -webkit-box-orient: vertical;
        }

        .time {
          position: absolute;
          right: 30px;
          top: 30%;
          width: 96px;
          height: 96px;
          text-align: center;
          background: #DCDEE0;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .month {
            width: 100%;
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #FFFFFF;
            line-height: 24px;
          }

          .year {
            width: 100%;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 30px;
          }
        }

        .nextBtn {
          width: 72px;
          height: 24px;
          background: rgba(1, 52, 140, 0);
          border: 1px solid #CACBCC;
          border-radius: 12px;
          position: absolute;
          left: 0;
          bottom: 30px;
          text-align: center;
          line-height: 28px;
          cursor: pointer;

          .iconColor {
            color: #CACBCC;
          }
        }
      }


    }

    .listItem:hover {
      .msg {
        .time {
          background: #1891FF;
          border-radius: 5px;
        }

        .nextBtn {
          background: #1891FF;
          border: 1px solid #CACBCC;
          border-radius: 12px;

          .iconColor {
            color: #fff;
          }
        }
      }

    }
  }

}
</style>
